<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <title>monochrome</title>
        
        <style>
            canvas {
                -webkit-box-shadow: 2px 2px 8px black;
            }
            canvas:active {
                -webkit-box-shadow: inset 0px 0px 8px black;
            }
        </style>
        
        <script type="text/javascript" src="./../../src/tmlib.js"></script>
        <script>
            TM.loadScript("dom", "canvas");
        </script>
        
        <script>
            
            tm.main(function(){
                var image = new Image();
                image.src = "";
                image.onload = init;
            });
            
            var global = global || {};
            
            var filter = function(fn)
            {
                var image_data = new tm.DOM.ImageData(global.imageData);
                image_data.filter(fn);
                global.context.putImageData(image_data.target, 0, 0);
            };
            
            var init = function()
            {
                var canvas = document.getElementById("c");
                canvas.width = this.width;
                canvas.height = this.height;
                global.context = canvas.getContext("2d");
                global.context.drawImage(this, 0, 0);
                
                var tm_canvas = TM.DOM.Canvas("#c");
                tm_canvas.event.click(function(){
                    alert("abc");
                });
                
                tm_canvas.filter.reverse(240, 0, 240, 320);
                tm_canvas.filter.monochrome(0, 320, 240, 320);
                tm_canvas.filter.red(240, 320, 240, 320);
            };
            
        </script>
        
    </head>
    
    <body>
        <h1>Filter Test</h1>
        <canvas id="c" width=640 height=480></canvas>
        
        <h2>ref</h2>
        <ul>
            <li><a href="http://journal.mycom.co.jp/articles/2010/09/14/html5-canvas-for-black-and-white/index.html">HTML5 Canvasで画像を白黒化する方法</a></li>
            <li><a href="http://spyrestudios.com/html5-canvas-image-effects-black-white/">HTML5 Canvas Image Effects: Black & White</a></li>
            <li><a href="http://d.hatena.ne.jp/c-yan2/20091007/1254921157">[Canvas] Canvas で画像モノクロフィルタ</a></li>
            <li><a href="http://d.hatena.ne.jp/scalar/20101026/1288068169">Canvas + File API + Drag&Drop API で Instagram みたいな画像フィルターを作ってみた</a></li>
        </ul>
    </body>
</html>





















